<!-- 图片预览页 -->
<template>

	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="box">
			<div class="swiper-container gallery-top">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item in listArr" :key="item.id">
						<img :src="item.imgSrc" />
					</div>
				</div>
				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>
			</div>
			<div class="swiper-container gallery-thumbs">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item in listArr" :key="item.id">
						<img :src="item.imgSrc" />

					</div>
				</div>
			</div>
		</div>
		
		
		<!--<van-loading type="spinner" color="white"  class="loading"/>-->
	</div>
</template>

<script>
	import { Loading } from 'vant';
	import Vue from 'vue'
	import 'swiper/dist/css/swiper.css';
	Vue.use(Loading);
	import commonHeader from 'common/common-header-transparent'
	import Swiper from 'swiper';
	export default {
		name: 'HelloWorld',
		data() {
			return {
				tittle: '图库',
				listArr: [{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/1'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/2'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/3'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/4'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/5'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/6'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/7'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/8'
					},
					{
						imgSrc: 'http://lorempixel.com/1200/1200/nature/10'
					},

				]
			}
		},
		mounted() {
			var thumbsSwiper = new Swiper('.gallery-thumbs', {
				spaceBetween: 10,
				slidesPerView: 4,
				watchSlidesVisibility: true,
			});
			var gallerySwiper = new Swiper('.gallery-top', {
				spaceBetween: 10,
				thumbs: {
					swiper: thumbsSwiper,
				}
			})
		},
		components: {
			commonHeader,
		},

	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.header-box {
		z-index: 999;
	}
	
	.box {
		height: 100%;
		background: #000000;
	}
	
	.swiper-container {
		width: 100%;
		height: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.swiper-button-next.swiper-button-white,
	.swiper-container-rtl .swiper-button-prev.swiper-button-white {
		background-image: none;
	}
	
	.swiper-button-prev.swiper-button-white {
		background-image: none;
	}
	
	.swiper-slide {
		background-size: cover;
		background-position: center;
		top: 0;
		left: 0;
		height: 250px;
		right: 0;
		bottom: 0;
		margin: auto;
		margin-right: 10px;
	}
	
	.gallery-top {
		height: 80%;
		width: 100%;
	}
	
	.gallery-thumbs {
		height: 20%;
		box-sizing: border-box;
		padding: 10px 0 41px 0;
	}
	
	.gallery-thumbs .swiper-slide {
		width: 70px;
		height: 70px;
		opacity: 0.4;
	}
	
	.gallery-thumbs .swiper-slide-thumb-active {
		opacity: 1;
	}
	
	.swiper-slide {
		img {
			width: 100%;
			height: 100%;
		}
	}
	.loading{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom: 0;
		margin:auto;
		z-index: 999;
	}
</style>